<template>
    <div id="basic">
      <div style="display: flex">
        <div style="display: flex; width: 100%">
          <div style="
                  width: 60%;
                  background-color: #2196f3;
                  height: 100px;
                  text-align: center;
                  line-height: 100px;
                ">
            <span style="font-size: 30px; font-weight: bold; color: #ffffff">成人</span><span
              style="font-size: 30px; color: #666666; margin-left: 20px">喂养习惯报告</span>
          </div>
          <div style="height: 100px; width: 40%;  background-color: #2196f3;">
            <!-- <img
                src="../../assets/img/11.jpg"
                style="height: 100%; width: 100%"
                alt=""
              /> -->
          </div>
        </div>
      </div>
  
      <div style="width: 100%; height: 40px; background-color: #2196f3; margin-top: 10px; display: flex;">
        <div><img src="../../assets/img/12_1.png" style="height: 40px" alt="" /></div>
        <div style="font-size: 20px; margin-left: 10px; line-height: 40px; color: #fff;">成人基本信息</div>
      </div>
      <div style="width: 1070px; border-top: 2px solid #2196f3; border-right: 2px solid #2196f3;  margin-top: 10px">
        <div style="display: flex">
          <div
            style="background-color: #2196f3; width: 9.9%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
            检测日期</div>
          <div style="width: 90%; height: 40px; border-bottom: 2px solid #2196f3; line-height: 40px; text-indent: 20px;">
            {{ report_time }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: #2196f3; width: 10%;height: 40px;text-align: center;line-height: 40px;color: #fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
            成人姓名
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
            {{ contents.username ?? '[]' }}
          </div>
          <div
            style="background-color: #2196f3;width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3;">
            性别
          </div>
          <div
            style="width: 15%; height: 40px; text-align: center;line-height: 40px;border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3;">
            {{ contents.sex == 1 ? '女' : '男' ?? '[]' }}
          </div>
          <div
            style="background-color: #2196f3; width: 10%; height: 40px; text-align: center; line-height: 40px; color:#fff; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3;">
            出生日期
          </div>
          <div
            style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
            {{ birth ?? '[]' }}
          </div>
          <div
            style=" background-color: #2196f3; width: 10%; height: 40px; text-align: center; line-height: 40px;color:#fff; border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
            监护人姓名
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #2196f3;">
            {{ contents.guardian_name ?? '[]' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
            监护人手机号
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; ">
            {{ contents.guardian_mobile ?? '[]' }}
          </div>
          <div
            style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
            身高
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; ">
            {{ contents.height ?? '[]' }}CM
          </div>
          <div
            style="background-color:#2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
            体重
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; ">
            {{ contents.weight ?? '[]' }}KG
          </div>
          <div
            style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
            头围
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #2196f3;">
            {{ contents.touwei ?? '[]' }}CM
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
            出生身长
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; ">
            {{ contents.chushengsg ?? '[]' }}CM
          </div>
          <div
            style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
            出生体重
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; ">
            {{ contents.chushengtz ?? '[]' }}KG
          </div>
          <div
            style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
            腹围
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; ">
            {{ contents.fuwei ?? '[]' }}CM
          </div>
          <div
            style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
            血型
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #2196f3;">
            {{ contents.xuexing_value ?? '[]' }}
          </div>
        </div>
        <div style="display: flex">
          <div
            style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
            民族
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; ">
            {{ contents.minzu_value ?? '[]' }}
          </div>
          <div
            style="background-color:#2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
            监护关系
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; ">
            {{ contents.guanxi_value ?? '[]' }}
          </div>
          <div
            style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
            家长教育
          </div>
          <div
            style=" width: 15%; height: 40px; text-align: center; line-height: 40px; border-right: 2px solid #2196f3; border-bottom: 2px solid #2196f3; ">
            {{ contents.jiaoyu_value ?? '[]' }}
          </div>
          <div
            style="background-color: #2196f3;width: 10%;height: 40px;text-align: center; line-height: 40px;color:#fff;border-right: 2px solid #2196f3;border-bottom: 2px solid #2196f3;">
            出生情况
          </div>
          <div style="width: 15%;height: 40px;text-align: center;line-height: 40px;border-bottom: 2px solid #2196f3;">
            {{ contents.birthSituation_value ?? '[]' }}
          </div>
        </div>
      </div>
  
      <div style="
              width: 100%;
              height: 40px;
              background-color: #2196f3;
              margin-top: 20px;
              display: flex;
            ">
        <div>
          <img src="../../assets/img/21.png" style="height: 40px" alt="" />
        </div>
        <div style="
                font-size: 20px;
                margin-left: 10px;
                line-height: 40px;
                color: #fff;
              ">
          成人饮食及生活方式原则
        </div>
      </div>
      <div style="
              width: 97%;
              min-height: 150px;
              border: 2px solid #2196f3;
              margin-top: 20px;
              margin-left: 10px;
              padding-left:10px;
            " v-html="principle"></div>
      <!-- 膳食方案明细 -->
  
      <div style="
              width: 100%;
              height: 40px;
              background-color: #2196f3;
              margin-top: 20px;
              display: flex;
            ">
        <div>
          <img src="../../assets/img/23.png" style="height: 40px" alt="" />
        </div>
        <div style="
                font-size: 20px;
                margin-left: 10px;
                line-height: 40px;
                color: #fff;
              ">
          膳食方案明细
        </div>
      </div>
      <div style="
              width: 98%;
              border: 2px solid #2196f3;
              line-height: 40px;
              text-align: center;
              margin-top: 20px;
              margin-left: 10px;
            ">
        <div style="display: flex">
          <div class="biao1" style="height: 40px; width: 50%; color: #ffffff">
            名称
          </div>
          <div class="biao3" style="height: 40px; width: 50%; color: #ffffff">
            推荐值
          </div>
        </div>
        <div style="display: flex">
          <div class="biao2" style="height: 40px; width: 50%">能量</div>
          <div class="biao4" style="height: 40px; width: 50%">
            {{ letEnergy.start }}～{{ letEnergy.end }}
          </div>
        </div>
        <div style="display: flex">
          <div class="biao2" style="height: 40px; width: 50%">碳水化合物</div>
          <div class="biao4" style="height: 40px; width: 50%">
            {{ carbohydrate.start }}～{{ carbohydrate.end }}
          </div>
        </div>
        <div style="display: flex">
          <div class="biao2" style="height: 40px; width: 50%">蛋白质</div>
          <div class="biao4" style="height: 40px; width: 50%">
            {{ protein.start }}～{{ protein.end }}
          </div>
        </div>
        <div style="display: flex">
          <div class="biao2" style="height: 40px; width: 50%">脂肪</div>
          <div class="biao4" style="height: 40px; width: 50%">
            {{ fat.start }}～{{ fat.end }}
          </div>
        </div>
        <div style="display: flex">
          <div class="biao2" style="height: 40px; width: 50%">碳水化合物</div>
          <div class="biao4" style="height: 40px; width: 50%">
            {{ carbohydrate.start }}～{{ carbohydrate.end }}
          </div>
        </div>
        <div style="display: flex">
          <div class="biao2" style="height: 40px; width: 50%">钙</div>
          <div class="biao4" style="height: 40px; width: 50%">
            {{ calcium.start }}～{{ calcium.end }}
          </div>
        </div>
        <div style="display: flex">
          <div class="biao2" style="height: 40px; width: 50%">钠</div>
          <div class="biao4" style="height: 40px; width: 50%">
            {{ sodium.start }}～{{ sodium.end }}
          </div>
        </div>
        <div style="display: flex">
          <div class="biao2" style="height: 40px; width: 50%">镁</div>
          <div class="biao4" style="height: 40px; width: 50%">
            {{ magnesium.start }}～{{ magnesium.end }}
          </div>
        </div>
        <div style="display: flex">
          <div class="biao2" style="height: 40px; width: 50%">铁</div>
          <div class="biao4" style="height: 40px; width: 50%">
            {{ iron.start }}～{{ iron.end }}
          </div>
        </div>
        <div style="display: flex">
          <div class="biao2" style="height: 40px; width: 50%">锌</div>
          <div class="biao4" style="height: 40px; width: 50%">
            {{ zinc.start }}～{{ zinc.end }}
          </div>
        </div>
        <div style="display: flex">
          <div class="biao2" style="height: 40px; width: 50%">硒</div>
          <div class="biao4" style="height: 40px; width: 50%">
            {{ selenium.start }}～{{ selenium.end }}
          </div>
        </div>
        <div style="display: flex">
          <div class="biao2" style="height: 40px; width: 50%">维生素A</div>
          <div class="biao4" style="height: 40px; width: 50%">
            {{ vitamin_a.start }}～{{ vitamin_a.end }}
          </div>
        </div>
        <div style="display: flex">
          <div class="biao2" style="height: 50px; width: 50%; line-height: 50px">
            维生素E
          </div>
          <div class="biao4" style="height: 50px; width: 50%; line-height: 50px">
            {{ vitamin_e.start }}～{{ vitamin_e.end }}
          </div>
        </div>
  
        <div style="display: flex; ">
          <div class="biao2" style="height: 40px; width: 50%">维生素B1</div>
          <div class="biao4" style="height: 40px; width: 50%">
            {{ vitamin_b1.start }}～{{ vitamin_b1.end }}
          </div>
        </div>
        <div style="display: flex">
          <div class="biao2" style="height: 40px; width: 50%">维生素B2</div>
          <div class="biao4" style="height: 40px; width: 50%">
            {{ vitamin_b2.start }}～{{ vitamin_b2.end }}
          </div>
        </div>
        <div style="display: flex">
          <div class="biao2" style="height: 40px; width: 50%">维生素C</div>
          <div class="biao4" style="height: 40px; width: 50%">
            {{ vitamin_c.start }}～{{ vitamin_c.end }}
          </div>
        </div>
      </div>
  
      <div style="
              width: 100%;
              height: 40px;
              background-color:#2196f3;
              margin-top: 300px;
              display: flex;
            ">
        <div>
          <img src="../../assets/img/23.png" style="height: 40px" alt="" />
        </div>
        <div style="
                font-size: 20px;
                margin-left: 10px;
                line-height: 40px;
                color: #fff;
              ">
          一周膳食清单
        </div>
      </div>
      <div style="border: 2px solid #2196f3; width: 98%;margin-left:10px;margin-top:20px;">
        <div class="dietOn" v-for="item in diet_analysis" :key="item">
          <div class="time-botton">
            <img src="../../assets/img/evaluaction_service_icon.png" alt="" style="width: 15px; height: 15px" />
            {{ item.pName }}
          </div>
          <div style="display: flex">
            <div class="plates" style="margin-left: 10px">
              <div class="time-type time-left-color">早餐</div>
              <div class="der">
                <div style="margin-left: 6%; padding-top: 6%">
                  <span class="plates-top-img" v-for="breakfast in item.早餐" :key="breakfast">
                    <div :class="breakfast.meal_image == undefined ? 'state1' : 'state2'">
                      <img :src="'http://' + baseUrl + '/' + breakfast.meal_image" alt=""
                        style="width: 100%; height: 100%" />
                    </div>
  
                  </span>
                  <span class="plates-top-img" v-for="earlier in item.早点" :key="earlier"><img
                      :src="'http://' + baseUrl + '/' + earlier.meal_image" alt=""
                      style="width: 100%; height: 100%" /></span>
                </div>
              </div>
              <div class="platesFoods">
                <div>大小：{{ item.multiple }}倍</div>
                <div>
                  早餐7:00:
                  <span v-for="breakfast in item.早餐" :key="breakfast">
                    <o class="foodsNames">{{ breakfast.food_name }}</o> 重量:{{
                      breakfast.weight
                    }}g;
                  </span>
                </div>
                <div>
                  早点10:00:
                  <span v-for="earlier in item.早点" :key="earlier">
                    <o class="foodsNames">{{ earlier.food_name }}</o> 重量:{{
                      earlier.weight
                    }}g;
                  </span>
                </div>
              </div>
            </div>
  
            <div class="plates">
              <div class="time-type time-common-color">午餐</div>
              <div class="der">
                <div style="">
                  <span class="plates-top-img" v-for="lunch in item.午餐" :key="lunch"><img
                      :src="'http://' + baseUrl + '/' + lunch.meal_image" alt="" style="width: 100%; height: 100%" /></span>
                  <span class="plates-top-img" v-for="noon in item.午点" :key="noon"><img
                      :src="'http://' + baseUrl + '/' + noon.meal_image" alt="" style="width: 100%; height: 100%" /></span>
                </div>
              </div>
  
              <div class="platesFoods">
                <div>大小：{{ item.multiple }}倍</div>
                <div>
                  午餐12:00:
                  <span v-for="lunch in item.午餐" :key="lunch">
                    <o class="foodsNames">{{ lunch.food_name }}</o> 重量:{{
                      lunch.weight
                    }}g;
                  </span>
                </div>
                <div>
                  午点15:00:
                  <span v-for="noon in item.午点" :key="noon">
                    <o class="foodsNames">{{ noon.food_name }}</o> 重量:{{
                      noon.weight
                    }}g;
                  </span>
                </div>
              </div>
            </div>
  
            <div class="plates">
              <div class="time-type time-right-color">晚餐</div>
              <div class="der">
                <div style="margin-left: 6%; padding-top: 6%">
                  <span class="plates-top-img" v-for="dinner in item.晚餐" :key="dinner"><img
                      :src="'http://' + baseUrl + '/' + dinner.meal_image" alt=""
                      style="width: 100%; height: 100%" /></span>
                  <span class="plates-top-img" v-for="late in item.晚点" :key="late"><img
                      :src="'http://' + baseUrl + '/' + late.meal_image" alt="" style="width: 100%; height: 100%" /></span>
                </div>
              </div>
  
              <div class="platesFoods">
                <div>大小：{{ item.multiple }}倍</div>
                <div>
                  晚餐18:00:
                  <span v-for="dinner in item.晚餐" :key="dinner">
                    <o class="foodsNames">{{ dinner.food_name }}</o> 重量:{{
                      dinner.weight
                    }}g;
                  </span>
                </div>
                <div>
                  晚点21:00:
                  <span v-for="late in item.晚点" :key="late">
                    <o class="foodsNames">{{ late.food_name }}</o> 重量:{{
                      late.weight
                    }}g;
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 食物选择建议 -->
  
      <div style=" width: 100%; height: 40px; background-color:#2196f3; margin-top: 800px;display: flex; ">
        <div><img src="../../assets/img/24_1.png" style="height: 40px" alt="" /></div>
        <div style="font-size: 20px;margin-left: 10px;line-height: 40px;color:#fff;">
          食物选择建议
        </div>
      </div>
  
      <div style="padding: 10px 10px;border: 2px solid #2196f3; width: 96%;margin-left:10px;margin-top:20px;">
        <div v-for="(item, index) in pagoda " :key="index">
          {{ proposal.filter((ite, index) => {
            return ite.food_product_id == item.food_product_id
          })[0] == undefined ? '' : item.title }}
          <div>
            <div v-if="item.product_energy < item.systam_down">
              {{ proposal.filter((ite, index) => {
                return ite.food_product_id == item.food_product_id
              })[0] == undefined ? '' : proposal.filter((ite, index) => {
                return ite.food_product_id == item.food_product_id
              })[0].content }}
            </div>
            <div v-if="item.product_energy > item.systam_up">
              {{ proposal1.filter((ite, index) => {
                return ite.food_product_id == item.food_product_id
              })[0] == undefined ? '' : proposal1.filter((ite, index) => {
                return ite.food_product_id == item.food_product_id
              })[0].content }}
            </div>
            <div v-if="item.product_energy >= item.systam_down && item.product_energy <= item.systam_up">
              {{ proposal2.filter((ite, index) => {
                return ite.food_product_id == item.food_product_id
              })[0] == undefined ? '' : proposal2.filter((ite, index) => {
                return ite.food_product_id == item.food_product_id
              })[0].content }}
            </div>
          </div>
        </div>
      </div>
  
      <div>
      </div>
    </div>
  </template>
    
    
  <script setup>
  import { defineComponent, onMounted, ref, watch } from "vue";
  import { ElMessage } from "element-plus";
  import * as api from "../../api/loginHttp";
  import http, { baseUrl } from "../../utils/http";
  import { useRoute, useRouter } from "vue-router";
  import PrintJS from "print-js";
  //   import ChildViewDietary from "../common/ChildViewdietarys.vue";
  
  const router = useRouter();
  const route = useRoute();
  const labName = ref();
  const groupId = ref();
  const reportId = ref();
  const id = ref();
  const early_intervention = ref({});
  const Monitoring_content = ref({});
  const high_contents = ref({});
  const pagoda = ref({});
  const proposal = ref({})
  const proposal1 = ref({})
  const proposal2 = ref({})
  const data = ref({});
  const principle = ref({});
  const diet = ref({});
  const contents = ref({})
  const birth = ref()
  const username = ref();
  const guardian = ref();
  const birthStatus = ref();
  
  const imgUrl = ref();
  const form = ref({
    elText: "",
    elTextTwo: "",
    elTextThree: "",
  });
  
  const letEnergy = ref({ energy: 0, start: 0, end: 0 });
  const protein = ref({ energy: 0, start: 0, end: 0 });
  const fat = ref({ energy: 0, start: 0, end: 0 });
  const carbohydrate = ref({ energy: 0, start: 0, end: 0 });
  const calcium = ref({ energy: 0, start: 0, end: 0 });
  const sodium = ref({ energy: 0, start: 0, end: 0 });
  const magnesium = ref({ energy: 0, start: 0, end: 0 });
  const iron = ref({ energy: 0, start: 0, end: 0 });
  const zinc = ref({ energy: 0, start: 0, end: 0 });
  const selenium = ref({ energy: 0, start: 0, end: 0 });
  const vitamin_a = ref({ energy: 0, start: 0, end: 0 });
  const vitamin_e = ref({ energy: 0, start: 0, end: 0 });
  const vitamin_b1 = ref({ energy: 0, start: 0, end: 0 });
  const vitamin_b2 = ref({ energy: 0, start: 0, end: 0 });
  const vitamin_c = ref({ energy: 0, start: 0, end: 0 });
  const diet_analysis = ref({});
  const hospital_name = ref();
  const report_time = ref();
  
  const onHome = async () => {
    await router.push({ path: "/Home" });
  };
  const kcalType = ref(2);
  
  const fetchData = async () => {
    if (route.params.groupId) {
      groupId.value = route.params.groupId;
      id.value = route.params.id;
      reportId.value = route.params.reportId;
  
      username.value = route.params.username;
      guardian.value = route.params.guardian;
      birthStatus.value = route.params.birth;
      if (groupId.value === 3) {
        labName.value = "婴幼儿营养测评";
      } else if (groupId.value === 5) {
        labName.value = "孕产妇营养测评";
      } else if (groupId.value === 6) {
        labName.value = "成年人营养测评";
      } else if (groupId.value === 7) {
        labName.value = "慢性病营养测评";
      } else {
        labName.value = "婴幼儿营养测评";
      }
  
      http
        .get(
          "api/archives/viewReportMember?id=" +
          reportId.value +
          "&username=" +
          username.value +
          "&guardian=" +
          guardian.value +
          "&birth=" +
          birthStatus.value
        )
        .then((res) => {
  
  
          if (res.data.code === 0) {
            ElMessage.error(res.data.msg);
          }
          report_time.value = res.data.data.times;
          contents.value = res.data.data.contents;
          birth.value = res.data.data.contents.birth;
  
          if (
            res.data.data.feed_advice != "" &&
            res.data.data.feed_advice != null
          ) {
            form.value.elText = res.data.data.feed_advice;
          } else {
            form.value.elText =
              "当膳食方案中有食谱或食材不符合您的膳食习惯时，请先与医生确认，若医生认为某些食材对成人的膳食营养改善很重要，要求不能置换或最好不要置换；其他类可进行同类食材替换，例如：猪肉、牛肉、羊肉之间可互换，鸡肉、鸭肉、鱼类之间可互换，蔬菜间可互换，米面间可互换，但要注意不要更改食材用量。\n" +
              "给成人烹调食物时，宜尽可能保持食物的原味，口味以清淡为宜，少放调料。\n" +
              "每天应当进行至少1小时的户外游戏或运动，每天看电视、玩平板电脑的累计时间不超过2小时，日常生活中还可适当增加一些有氧活动例如：自行车、慢跑、跳绳、仰卧起坐、游泳等。";
          }
  
          if (
            res.data.data.nutrition_advice != "" &&
            res.data.data.nutrition_advice != null
          ) {
            form.value.elTextTwo = res.data.data.nutrition_advice;
          } else {
            form.value.elTextTwo =
              "这个阶段是饮食行为和生活方式形成的关键时期，7岁前的成人生活自理能力不断提高，自主性、好奇心、学习能力和模仿能力增强，该时期也是培养良好饮食习惯的重要阶段。\n" +
              "家长要有意识的培养孩子规律就餐，每天的饮食种类应该包含谷、肉、蛋、菜、奶、水果，自主进食不挑食的饮食习惯。";
            if (
              contents._rawValue.hair_value != "" ||
              contents._rawValue.oralCavity_value != "" ||
              contents._rawValue.neck_value != "" ||
              contents._rawValue.Neuropathy_value != "" ||
              contents._rawValue.symptoms_value != ""
            ) {
              form.value.elTextTwo =
                "这个阶段是饮食行为和生活方式形成的关键时期，7岁前的成人生活自理能力不断提高，自主性、好奇心、学习能力和模仿能力增强，该时期也是培养良好饮食习惯的重要阶段。\n" +
                "家长要有意识的培养孩子规律就餐，每天的饮食种类应该包含谷、肉、蛋、菜、奶、水果，自主进食不挑食的饮食习惯。";
            } else if (contents._rawValue.eye_value != "") {
              form.value.elTextTwo =
                "平衡膳食，多摄入动物肝、肾、奶、蛋和深绿或红黄蔬菜、水果等富维生素A和β胡萝卜素食物。婴儿要及时添加含动物肝等辅食，没有母乳的婴儿需配方奶喂养。生后及时按预防量补充维生素A。幼儿膳食中要注意脂肪和含维生素A和β胡萝卜素食物搭配食用。患消化系统疾病及消耗性疾病的患儿需及时补充维生素A制剂。\n" +
                "长期摄入不足是导致维生素A缺乏的主要原因，成人维生素A的主要来自1、肝脏、鱼油、奶制品、鸡蛋等动物性食物；2、绿叶蔬菜以及黄色或橙色的水果和蔬菜中富含各种胡罗卜素，可在体内转变为维生素A。对于人体来说，动物性食物中的VA要比植物性中的VA更容易吸收。";
            } else if (contents._rawValue.skin_value != "") {
              form.value.elTextTwo =
                "谷类、硬果、动物内脏、蛋类及酵母中维生素B1含量丰富，但需要注意谷类加工过度可损失维生素B1，以及生鱼和贝类含有破坏维生素B1的酶，所以在日常饮食中不长期食用精米、生鱼和贝类。还需要注意的是维生素B1易溶于水，在碱性条件下易受热破坏，所以过分淘米或烹调中加碱也可导致维生素B1大量损失。\n" +
                "富含维生素B2的食物主要是动物肝脏（如肝、肾、心）等、蛋黄和乳类。谷类的精细加工会导致所含的维生素B2流失，所以成人日常饮食中还需要增加粗粮的比例以及保证每日鸡蛋和牛奶的摄入。";
            } else if (contents._rawValue.sign_value != "") {
              form.value.elTextTwo =
                "足量的食物，平衡膳食，规律就餐，不偏食不挑食，每天饮奶多喝水，避免含糖饮料，是保障成人生长发育的关键。日常生活中选择健康有营养的零食，避免含糖饮料和高脂肪的油炸食物，导致成人正餐不按量食用。\n" +
                "营养不良的成人，要在保证能量摄入充足的基础上，增加鱼、禽、蛋、瘦肉、豆制品等富含优质蛋白质的食物的摄入，经常使用奶及奶制品，每天吃新鲜的蔬菜水果；保证一日三餐，纠正偏食和过度节食等不健康饮食行为，并保持适宜的身体活动。";
            } else if (contents._rawValue.sign_value != "") {
              form.value.elTextTwo =
                "奶和奶制品是成人钙的主要来源，也是最佳来源。绿色蔬菜、大豆及其制品特殊含有较高的钙，可作为补充来源。 需要特别注意的是钙在体内主动吸收需要维生素D，维生素D缺乏或不足时，钙主动吸收下降间接造成改缺乏。此外，运动锻炼也是骨骼健康的重要决定因素，跑、跳等中等程度的运动有利于骨骼钙沉积，达到更高的估量峰值。";
            }
          }
  
          form.value.elTextThree = res.data.data.doctor_advice;
        });
  
      imgUrl.value = "http://" + baseUrl + "/";
  
      let params = {
        groupId: groupId.value,
        id: id.value,
        reportId: reportId.value,
  
        username: username.value,
        guardian: guardian.value,
        birth: birthStatus.value,
      };
      const data = await api.energy(params);
  
      if (data.data.code == 0) {
        ElMessage.error(data.data.msg);
        await router.push({ path: "/Evaluation/" + groupId.value + "/" + id });
      }
  
      if (!data.data.data.diet_analysis) {
        ElMessage.error(data.data.msg);
        await router.push({ path: "/Evaluation/" + groupId.value + "/" + id });
      }
      for (let i = 0; i < data.data.data.diet_analysis.length; i++) {
        switch (i) {
          case 0:
            data.data.data.diet_analysis[i]["pName"] = "周一";
            break;
          case 1:
            data.data.data.diet_analysis[i]["pName"] = "周二";
            break;
          case 2:
            data.data.data.diet_analysis[i]["pName"] = "周三";
            break;
          case 3:
            data.data.data.diet_analysis[i]["pName"] = "周四";
            break;
          case 4:
            data.data.data.diet_analysis[i]["pName"] = "周五";
            break;
          case 5:
            data.data.data.diet_analysis[i]["pName"] = "周六";
            break;
          case 6:
            data.data.data.diet_analysis[i]["pName"] = "周日";
            break;
        }
      }
  
      diet_analysis.value = data.data.data.diet_analysis;
  
      for (let i = 0; i < data.data.data.diet.length; i++) {
        letEnergy._value.energy =
          letEnergy._value.energy + parseInt(data.data.data.diet[i]["energy"]);
        protein._value.energy =
          protein._value.energy + parseInt(data.data.data.diet[i]["protein"]);
        fat._value.energy =
          fat._value.energy + parseInt(data.data.data.diet[i]["fat"]);
        carbohydrate._value.energy =
          carbohydrate._value.energy +
          parseInt(data.data.data.diet[i]["carbohydrate"]);
        calcium._value.energy =
          calcium._value.energy + parseInt(data.data.data.diet[i]["calcium"]);
        sodium._value.energy =
          sodium._value.energy + parseInt(data.data.data.diet[i]["sodium"]);
        magnesium._value.energy =
          magnesium._value.energy + parseInt(data.data.data.diet[i]["magnesium"]);
        iron._value.energy =
          iron._value.energy + parseInt(data.data.data.diet[i]["iron"]);
        zinc._value.energy =
          zinc._value.energy + parseInt(data.data.data.diet[i]["zinc"]);
        selenium._value.energy =
          selenium._value.energy + parseInt(data.data.data.diet[i]["selenium"]);
        vitamin_a._value.energy =
          vitamin_a._value.energy + parseInt(data.data.data.diet[i]["vitamin_a"]);
        vitamin_e._value.energy =
          vitamin_e._value.energy + parseInt(data.data.data.diet[i]["vitamin_e"]);
        vitamin_b1._value.energy =
          vitamin_b1._value.energy +
          parseInt(data.data.data.diet[i]["vitamin_b1"]);
        vitamin_b2._value.energy =
          vitamin_b2._value.energy +
          parseInt(data.data.data.diet[i]["vitamin_b2"]);
        vitamin_c._value.energy =
          vitamin_c._value.energy + parseInt(data.data.data.diet[i]["vitamin_c"]);
      }
  
      letEnergy._value.start = data.data.data.packAge[0].start_package;
      letEnergy._value.end = data.data.data.packAge[0].end_package;
      letEnergy._value.keyword = "✔ 正常";
      letEnergy._value.color = "everyBlack";
  
      // if (letEnergy._value.energy < letEnergy._value.start) {
      //   principle.value=data.value.foodliving[2].content;
      //   letEnergy._value.keyword = "▼ 不足";
      //   letEnergy._value.color = "everyRed";
      //   kcalType.value = 3;
      // } else if (letEnergy._value.energy > letEnergy._value.end) {
      //   principle.value=data.value.foodliving[1].content;
      //   letEnergy._value.keyword = "▲ 超标";
      //   letEnergy._value.color = "everyOrange";
      //   kcalType.value = 1;
      // }else{
      //   principle.value=data.value.foodliving[0].content;
      // }
  
      protein._value.start = data.data.data.packAge[1].start_package;
      protein._value.end = data.data.data.packAge[1].end_package;
      protein._value.keyword = "✔ 正常";
      protein._value.color = "everyBlack";
      if (protein._value.energy < protein._value.start) {
        protein._value.keyword = "▼ 不足";
        protein._value.color = "everyRed";
      } else if (protein._value.energy > protein._value.end) {
        protein._value.keyword = "▲ 超标";
        protein._value.color = "everyOrange";
      }
  
      fat._value.start = data.data.data.packAge[2].start_package;
      fat._value.end = data.data.data.packAge[2].end_package;
      fat._value.keyword = "✔ 正常";
      fat._value.color = "everyBlack";
      if (fat._value.energy < fat._value.start) {
        fat._value.keyword = "▼ 不足";
        fat._value.color = "everyRed";
      } else if (fat._value.energy > fat._value.end) {
        fat._value.keyword = "▲ 超标";
        fat._value.color = "everyOrange";
      }
  
      carbohydrate._value.start = data.data.data.packAge[3].start_package;
      carbohydrate._value.end = data.data.data.packAge[3].end_package;
      carbohydrate._value.keyword = "✔ 正常";
      carbohydrate._value.color = "everyBlack";
      if (carbohydrate._value.energy < carbohydrate._value.start) {
        carbohydrate._value.keyword = "▼ 不足";
        carbohydrate._value.color = "everyRed";
      } else if (carbohydrate._value.energy > carbohydrate._value.end) {
        carbohydrate._value.keyword = "▲ 超标";
        carbohydrate._value.color = "everyOrange";
      }
  
      calcium._value.start = data.data.data.packAge[4].start_package;
      calcium._value.end = data.data.data.packAge[4].end_package;
      calcium._value.keyword = "✔ 正常";
      calcium._value.color = "everyBlack";
      if (calcium._value.energy < calcium._value.start) {
        calcium._value.keyword = "▼ 不足";
        calcium._value.color = "everyRed";
      } else if (calcium._value.energy > calcium._value.end) {
        calcium._value.keyword = "▲ 超标";
        calcium._value.color = "everyOrange";
      }
  
      sodium._value.start = data.data.data.packAge[5].start_package;
      sodium._value.end = data.data.data.packAge[5].end_package;
      sodium._value.keyword = "✔ 正常";
      sodium._value.color = "everyBlack";
      if (sodium._value.energy < sodium._value.start) {
        sodium._value.keyword = "▼ 不足";
        sodium._value.color = "everyRed";
      } else if (sodium._value.energy > sodium._value.end) {
        sodium._value.keyword = "▲ 超标";
        sodium._value.color = "everyOrange";
      }
  
      magnesium._value.start = data.data.data.packAge[6].start_package;
      magnesium._value.end = data.data.data.packAge[6].end_package;
      magnesium._value.keyword = "✔ 正常";
      magnesium._value.color = "everyBlack";
      if (magnesium._value.energy < magnesium._value.start) {
        magnesium._value.keyword = "▼ 不足";
        magnesium._value.color = "everyRed";
      } else if (magnesium._value.energy > magnesium._value.end) {
        magnesium._value.keyword = "▲ 超标";
        magnesium._value.color = "everyOrange";
      }
  
      iron._value.start = data.data.data.packAge[7].start_package;
      iron._value.end = data.data.data.packAge[7].end_package;
      iron._value.keyword = "✔ 正常";
      iron._value.color = "everyBlack";
      if (iron._value.energy < iron._value.start) {
        iron._value.keyword = "▼ 不足";
        iron._value.color = "everyRed";
      } else if (iron._value.energy > iron._value.end) {
        iron._value.keyword = "▲ 超标";
        iron._value.color = "everyOrange";
      }
  
      zinc._value.start = data.data.data.packAge[8].start_package;
      zinc._value.end = data.data.data.packAge[8].end_package;
      zinc._value.keyword = "✔ 正常";
      zinc._value.color = "everyBlack";
      if (zinc._value.energy < zinc._value.start) {
        zinc._value.keyword = "▼ 不足";
        zinc._value.color = "everyRed";
      } else if (zinc._value.energy > zinc._value.end) {
        zinc._value.keyword = "▲ 超标";
        zinc._value.color = "everyOrange";
      }
  
      selenium._value.start = data.data.data.packAge[9].start_package;
      selenium._value.end = data.data.data.packAge[9].end_package;
      selenium._value.keyword = "✔ 正常";
      selenium._value.color = "everyBlack";
      if (selenium._value.energy < selenium._value.start) {
        selenium._value.keyword = "▼ 不足";
        selenium._value.color = "everyRed";
      } else if (selenium._value.energy > selenium._value.end) {
        selenium._value.keyword = "▲ 超标";
        selenium._value.color = "everyOrange";
      }
  
      vitamin_a._value.start = data.data.data.packAge[10].start_package;
      vitamin_a._value.end = data.data.data.packAge[10].end_package;
      vitamin_a._value.keyword = "✔ 正常";
      vitamin_a._value.color = "everyBlack";
      if (vitamin_a._value.energy < vitamin_a._value.start) {
        vitamin_a._value.keyword = "▼ 不足";
        vitamin_a._value.color = "everyRed";
      } else if (vitamin_a._value.energy > vitamin_a._value.end) {
        vitamin_a._value.keyword = "▲ 超标";
        vitamin_a._value.color = "everyOrange";
      }
  
      vitamin_e._value.start = data.data.data.packAge[11].start_package;
      vitamin_e._value.end = data.data.data.packAge[11].end_package;
      vitamin_e._value.keyword = "✔ 正常";
      vitamin_e._value.color = "everyBlack";
      if (vitamin_e._value.energy < vitamin_e._value.start) {
        vitamin_e._value.keyword = "▼ 不足";
        vitamin_e._value.color = "everyRed";
      } else if (vitamin_e._value.energy > vitamin_e._value.end) {
        vitamin_e._value.keyword = "▲ 超标";
        vitamin_e._value.color = "everyOrange";
      }
  
      vitamin_b1._value.start = data.data.data.packAge[12].start_package;
      vitamin_b1._value.end = data.data.data.packAge[12].end_package;
      vitamin_b1._value.keyword = "✔ 正常";
      vitamin_b1._value.color = "everyBlack";
      if (vitamin_b1._value.energy < vitamin_b1._value.start) {
        vitamin_b1._value.keyword = "▼ 不足";
        vitamin_b1._value.color = "everyRed";
      } else if (vitamin_b1._value.energy > vitamin_b1._value.end) {
        vitamin_b1._value.keyword = "▲ 超标";
        vitamin_b1._value.color = "everyOrange";
      }
  
      vitamin_b2._value.start = data.data.data.packAge[13].start_package;
      vitamin_b2._value.end = data.data.data.packAge[13].end_package;
      vitamin_b2._value.keyword = "✔ 正常";
      vitamin_b2._value.color = "everyBlack";
      if (vitamin_b2._value.energy < vitamin_b2._value.start) {
        vitamin_b2._value.keyword = "▼ 不足";
        vitamin_b2._value.color = "everyRed";
      } else if (vitamin_b2._value.energy > vitamin_b2._value.end) {
        vitamin_b2._value.keyword = "▲ 超标";
        vitamin_b2._value.color = "everyOrange";
      }
  
      vitamin_c._value.start = data.data.data.packAge[14].start_package;
      vitamin_c._value.end = data.data.data.packAge[14].end_package;
      vitamin_c._value.keyword = "✔ 正常";
      vitamin_c._value.color = "everyBlack";
      if (vitamin_c._value.energy < vitamin_c._value.start) {
        vitamin_c._value.keyword = "▼ 不足";
        vitamin_c._value.color = "everyRed";
      } else if (vitamin_c._value.energy > vitamin_c._value.end) {
        vitamin_c;
        vitamin_c._value.keyword = "▲ 超标";
        vitamin_c._value.color = "everyOrange";
      }
  
      setTimeout(() => {
        print("print-all");
      }, 2000);
    } else {
      ElMessage.error("栏目编号不得为空");
      await router.push({ path: "/Home" });
    }
  };
  const pageList = async () => {
    await router.push({ path: "/pageList/" + groupId.value });
  };
  onMounted(() => {
    fetchData();
  });
  
  onMounted(() => {
    // 需要获取到element,所以是onMounted的Hook
    http
      .get(
        "api/archives/viewreport?id=" +
        reportId.value +
        "&username=" +
        username.value +
        "&guardian=" +
        guardian.value +
        "&birth=" +
        birthStatus.value
      )
      .then((res) => {
        // console.log(res.data.data,'777')
        proposal.value = res.data.data.foodselection.filter((item, index) => {
          return item.up_type == 2
        })
        proposal1.value = res.data.data.foodselection.filter((item, index) => {
          return item.up_type == 1
        })
        proposal2.value = res.data.data.foodselection.filter((item, index) => {
          return item.up_type == 3
        })
  
  
        early_intervention.value =
          res.data.data.high_contents.intervention_one +
          res.data.data.high_contents.intervention_two +
          res.data.data.high_contents.intervention_three;
        Monitoring_content.value =
          res.data.data.high_contents.family_1 +
          res.data.data.high_contents.family_2 +
          res.data.data.high_contents.family_3 +
          res.data.data.high_contents.family_4 +
          res.data.data.high_contents.family_5 +
          res.data.data.high_contents.family_6 +
          res.data.data.high_contents.family_7 +
          res.data.data.high_contents.family_8 +
          res.data.data.high_contents.family_9 +
          res.data.data.high_contents.family_10 +
          res.data.data.high_contents.family_11 +
          res.data.data.high_contents.family_12 +
          res.data.data.high_contents.family_13;
        high_contents.value = res.data.data.high_contents;
        hospital_name.value = res.data.data.hospital_name;
        diet.value = res.data.data.diet;
        pagoda.value = res.data.data.pagoda;
        data.value = res.data.data
        if (letEnergy._value.energy < letEnergy._value.start) {
          principle.value = data.value.foodliving[2].content;
          letEnergy._value.keyword = "▼ 不足";
          letEnergy._value.color = "everyRed";
          kcalType.value = 3;
        } else if (letEnergy._value.energy > letEnergy._value.end) {
          principle.value = data.value.foodliving[1].content;
          letEnergy._value.keyword = "▲ 超标";
          letEnergy._value.color = "everyOrange";
          kcalType.value = 1;
        } else {
          principle.value = data.value.foodliving[0].content;
        }
        // principle.value = res.data.data.principle;
  
        let color = ["#3EA4AA"];
        let color1 = ["#D0443B", "#3EA4AA"];
        let color2 = ["#D0443B", "#3EA4AA"];
        let xAxisData = ["1", "2", "3", "4", "5", "6", "7"];
        var arr = [];
        var arr2 = [];
        var parr = res.data.data.contents.primaryHeight;
        for (let i = 0; i < parr.length; i++) {
          arr.push(parr[i].content);
          arr2.push(parr[i].month);
        }
        var arr1 = [];
        var arr3 = [];
        var parr1 = res.data.data.contents.primaryWeight;
        for (let i = 0; i < parr1.length; i++) {
          arr1.push(parr1[i].content);
          arr3.push(parr1[i].month);
        }
  
        var myChart = echarts.init(document.getElementById("myChart1"));
        myChart.value = myChart;
        myChart.setOption({
          backgroundColor: "#fff",
          color: color,
          legend: {
            top: 20,
          },
          tooltip: {
            trigger: "axis",
            formatter: function () {
              return "";
            },
          },
          grid: {
            top: 100,
            containLabel: true,
          },
          xAxis: [
            {
              name: "次数",
              type: "category",
              boundaryGap: false,
              axisLabel: {
                formatter: "{value}",
                textStyle: {
                  color: "#606266",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#E4E7ED",
                },
              },
              axisTick: {
                show: false, // 刻度出来的尖尖
              },
              splitLine: {
                show: false,
                lineStyle: {
                  color: ["#E4E7ED"],
                  width: 1,
                  type: "solid",
                },
              },
              axisPointer: {
                lineStyle: {
                  color: "#DCDFE6", //坐标轴指示线
                },
                show: true, //不坐标轴指示线
              },
              nameTextStyle: {
                color: "#606266",
                fontSize: 12,
                lineHeight: 40,
                padding: [0, 0, 0, -15],
              },
              data: xAxisData,
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "BMI值",
              axisLabel: {
                textStyle: {
                  color: "#606266",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#E4E7ED",
                },
              },
              axisTick: {
                show: false, // 刻度出来的尖尖
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: ["#E4E7ED"],
                  width: 1,
                  type: "dotted",
                },
              },
              axisPointer: {
                lineStyle: {
                  color: "#DCDFE6", //坐标轴指示线
                },
                show: true, //不坐标轴指示线
              },
              nameTextStyle: {
                color: "#606266",
                fontSize: 12,
                lineHeight: 40,
              },
              splitArea: {
                show: true,
                areaStyle: {
                  color: [
                    "rgba(83,148,208,0.15)",
                    "rgba(103,194,58,0.15)",
                    "rgba(226,203,80,0.15)",
                    "rgba(226,115,80,0.15)",
                  ],
                },
              },
            },
          ],
          series: [
            {
              name: "我的",
              type: "line",
              smooth: true,
              symbolSize: 8,
              zlevel: 3,
              lineStyle: {
                normal: {
                  color: color[1],
                },
              },
              symbol: "circle", //数据交叉点样式 (实心点)
              // itemStyle: {
              //     normal: {
              //         color: "#ffffff",
              //         borderColor: '#3EA4AA',
              //         borderWidth: 1,
              //     }
              // },
              data: res.data.data.contents.sumBmi,
            },
          ],
        });
        window.addEventListener("resize", function () {
          myChart.resize();
        });
  
        var myChart1 = echarts.init(document.getElementById("myChart2"));
        myChart1.value = myChart1;
        myChart1.setOption({
          backgroundColor: "#fff",
          color: color1,
          legend: {
            top: 20,
          },
          tooltip: {
            trigger: "axis",
            formatter: function () {
              return "";
            },
          },
          grid: {
            top: 100,
            containLabel: true,
          },
          xAxis: [
            {
              name: "月份",
              type: "category",
              boundaryGap: false,
              axisLabel: {
                formatter: "{value}",
                textStyle: {
                  color: "#606266",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#E4E7ED",
                },
              },
              axisTick: {
                show: false, // 刻度出来的尖尖
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: ["#E4E7ED"],
                  width: 1,
                  type: "solid",
                },
              },
              axisPointer: {
                lineStyle: {
                  color: "#DCDFE6", //坐标轴指示线
                },
                show: true, //不坐标轴指示线
              },
              nameTextStyle: {
                color: "#606266",
                fontSize: 12,
                lineHeight: 40,
                padding: [0, 0, 0, -15],
              },
              data: arr2,
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "身高",
              axisLabel: {
                textStyle: {
                  color: "#606266",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#E4E7ED",
                },
              },
              axisTick: {
                show: false, // 刻度出来的尖尖
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: ["#E4E7ED"],
                  width: 1,
                  type: "solid",
                },
              },
              axisPointer: {
                lineStyle: {
                  color: "#DCDFE6", //坐标轴指示线
                },
                show: true, //不坐标轴指示线
              },
              nameTextStyle: {
                color: "#606266",
                fontSize: 12,
                lineHeight: 40,
              },
            },
          ],
          series: [
            {
              // name: "2018",
              name: "国际",
              type: "line",
              smooth: true,
              symbolSize: 8,
              zlevel: 3,
              lineStyle: {
                normal: {
                  color: color1[0],
                },
              },
              symbol: "circle", //数据交叉点样式
              // itemStyle: {
              //     normal: {
              //         color: "#ffffff",
              //         borderColor: '#D0443B',
              //         borderWidth: 1,
              //     }
              // },
              data: arr,
            },
            {
              name: "我的",
              type: "line",
              smooth: true,
              symbolSize: 8,
              zlevel: 3,
              lineStyle: {
                normal: {
                  color: color1[1],
                },
              },
              symbol: "circle", //数据交叉点样式 (实心点)
              // itemStyle: {
              //     normal: {
              //         color: "#ffffff",
              //         borderColor: '#3EA4AA',
              //         borderWidth: 1,
              //     }
              // },
              data: res.data.data.contents.sumHeight,
            },
          ],
        });
        window.addEventListener("resize", function () {
          myChart1.resize();
        });
  
        var myChart2 = echarts.init(document.getElementById("myChart3"));
        myChart2.value = myChart2;
        myChart2.setOption({
          backgroundColor: "#fff",
          color: color2,
          legend: {
            top: 20,
          },
          tooltip: {
            trigger: "axis",
            formatter: function () {
              return "";
            },
          },
          grid: {
            top: 100,
            containLabel: true,
          },
          xAxis: [
            {
              name: "月份",
              type: "category",
              boundaryGap: false,
              axisLabel: {
                formatter: "{value}",
                textStyle: {
                  color: "#606266",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#E4E7ED",
                },
              },
              axisTick: {
                show: false, // 刻度出来的尖尖
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: ["#E4E7ED"],
                  width: 1,
                  type: "solid",
                },
              },
              axisPointer: {
                lineStyle: {
                  color: "#DCDFE6", //坐标轴指示线
                },
                show: true, //不坐标轴指示线
              },
              nameTextStyle: {
                color: "#606266",
                fontSize: 12,
                lineHeight: 40,
                padding: [0, 0, 0, -15],
              },
              data: arr3,
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "体重",
              axisLabel: {
                textStyle: {
                  color: "#606266",
                },
              },
              axisLine: {
                lineStyle: {
                  color: "#E4E7ED",
                },
              },
              axisTick: {
                show: false, // 刻度出来的尖尖
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: ["#E4E7ED"],
                  width: 1,
                  type: "solid",
                },
              },
              axisPointer: {
                lineStyle: {
                  color: "#DCDFE6", //坐标轴指示线
                },
                show: true, //不坐标轴指示线
              },
              nameTextStyle: {
                color: "#606266",
                fontSize: 12,
                lineHeight: 40,
              },
            },
          ],
          series: [
            {
              // name: "2018",
              name: "国际",
              type: "line",
              smooth: true,
              symbolSize: 8,
              zlevel: 3,
              lineStyle: {
                normal: {
                  color: color2[0],
                },
              },
              symbol: "circle", //数据交叉点样式
              // itemStyle: {
              //     normal: {
              //         color: "white",
              //         borderColor: '#D0443B',
              //         borderWidth: 1,
              //     }
              // },
              data: arr1,
            },
            {
              name: "我的",
              type: "line",
              smooth: true,
              symbolSize: 8,
              zlevel: 3,
              lineStyle: {
                normal: {
                  color: color2[1],
                },
              },
              symbol: "circle", //数据交叉点样式 (实心点)
              // itemStyle: {
              //     normal: {
              //         color: "#ffffff",
              //         borderColor: '#3EA4AA',
              //         borderWidth: 1,
              //     }
              // },
              data: res.data.data.contents.sumWeight,
            },
          ],
        });
        window.addEventListener("resize", function () {
          myChart2.resize();
        });
      });
  });
  </script>
    
  <style scoped>
  .state1 {
    display: none;
  }
  
  .state2 {
    display: block;
  }
  
  .biao1 {
    width: 25%;
    border-bottom: 1px solid #2196f3;
    border-right: 1px solid #2196f3;
    background-color: #2196f3;
    color: #fff;
  }
  
  .biao5 {
    width: 25%;
    border-right: 1px solid #2196f3;
    background-color: #2196f3;
    color: #fff;
  }
  
  .biao6 {
    width: 25%;
    border-right: 1px solid #2196f3;
    color: #000;
  }
  
  .biao2 {
    width: 25%;
    border-bottom: 1px solid #2196f3;
    border-right: 1px solid #2196f3;
    color: #000;
  }
  
  .biao3 {
    width: 25%;
    border-bottom: 1px solid #2196f3;
    background-color: #2196f3;
    color: #fff;
  }
  
  .biao4 {
    width: 75%;
    border-bottom: 1px solid #2196f3;
    color: #000;
  }
  
  .biao7 {
    width: 25%;
    color: #000;
  }
  
  .params {
    width: 100%;
    font-size: 22px;
    font-weight: bold;
  }
  
  #basic .title {
    font-size: 36px;
    width: 100%;
    text-align: center;
  }
  
  #basic {
    font-size: 14px;
    width: 1075px;
    min-height: 1244px;
    overflow: hidden;
    padding: 0;
    word-break: break-all;
    margin: auto;
    box-shadow: var(--el-box-shadow-light);
    border-radius: var(--el-card-border-radius);
    background-color: var(--el-card-bg-color);
    /* color: var(--el-text-color-primary); */
    transition: var(--el-transition-duration);
    --el-card-border-color: var(--el-border-color-light, #ebeef5);
    --el-card-border-radius: 4px;
    --el-card-padding: 20px;
    --el-card-bg-color: var(--el-color-white);
  }
  
  #basic #createTime {
    font-size: 16px;
    color: #999999;
    float: right;
  }
  
  .subTitle {
    font-size: 30px;
    text-align: center;
    height: 30px;
    color: #2196f3;
  }
  
  .right-box-card {
    margin-left: 2%;
    margin-top: 1%;
    position: static;
    top: calc(260px);
    width: 60%;
    float: left;
    /*min-height: 650px;*/
  }
  
  .images-wrapper {
    width: 100%;
    position: relative;
    height: 173px;
    font-weight: bold;
  }
  
  .foodsNames {
    color: red;
  }
  
  .images-content {
    position: absolute;
    z-index: 1;
    line-height: 54px;
    top: calc(55% - 54px);
    overflow: hidden;
    margin-left: 55%;
    font-size: 18px;
  }
  
  .service_plate {
    background: url("../../assets/img/evaluaction_service_plate.png") center no-repeat;
  }
  
  .dietOn {
    height: 510px;
    margin-bottom: 270px;
  }
  
  .everyRed {
    color: red;
  }
  
  .everyOrange {
    color: orange;
  }
  
  .everyBlack {
    color: #333333;
  }
  
  .time-botton {
    background-color: #2196f3;
    width: 108px;
    height: 41px;
    color: #fff;
    font-size: 16px;
    border-radius: 100px;
    line-height: 41px;
    margin: 42px 0 0 40px;
    text-align: center;
  }
  
  .time-type {
    width: 58px;
    height: 58px;
    line-height: 58px;
    text-align: center;
    background: #85ce61;
    border-radius: 50%;
    opacity: 1;
    color: #fff;
    box-shadow: 5px 5px 2px #888888;
    margin: 20px 0 20px 40%;
  }
  
  .der {
    width: 240px;
    height: 174px;
    background: url("../../assets/img/evaluaction_service_plate.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  
  .platesFoods {
    margin-top: 5px;
    margin-left: 8px;
  
    color: #333333;
    font-size: 16px;
  }
  
  .platesFoods div {
    padding-bottom: 18px;
  }
  
  .platesFoods span {
    color: #666666;
  }
  
  .plates {
    width: 33%;
    float: left;
  }
  
  .plates .plates-top-img {
    float: left;
    margin-left: 1%;
    width: 30%;
  }
  
  .time-left-color {
    background: #85ce61;
  }
  
  .time-common-color {
    background: #e8b973;
  }
  
  .time-right-color {
    background: #6ea9e0;
  }
  
  .images-lab {
    position: absolute;
    z-index: 1;
    line-height: 54px;
    top: calc(85% - 54px);
    overflow: hidden;
    margin-left: 55%;
    font-size: 50px;
  }
  
  #params {
    margin-top: 3%;
    font-size: 22px;
    font-weight: bold;
  }
  
  .shu {
    width: 5px;
    height: 30px;
    background: #2196f3;
    opacity: 1;
    border-radius: 100px;
    float: left;
    margin-right: 2%;
    margin-left: 3%;
  }
  
  #params span {
    font-size: 15px;
    color: #666;
    margin-left: 2%;
  }
  
  li {
    list-style-type: none;
  }
  
  #params ul {
    margin-left: 3%;
  }
  
  .topColor {
    color: #e8b973;
  }
  
  .topBgColor {
    border: 1px solid #e8b973;
    background-color: #e8b973;
  }
  
  .normalColor {
    color: #2196f3;
  }
  
  .normalBgColor {
    border: 1px solid #2196f3;
    background-color: #2196f3;
  }
  
  .bottomColor {
    color: #6ca9e3;
  }
  
  .bottomBgColor {
    border: 1px solid #6ca9e3;
    background-color: #6ca9e3;
  }
  
  .images-lab span {
    font-size: 18px;
  }
  
  .images-right {
    position: absolute;
    z-index: 1;
    left: 0;
    bottom: 0;
    width: 15%;
    height: 20%;
    line-height: 34px;
    top: calc(95% - 54px);
    overflow: hidden;
    margin-left: 75%;
    font-size: 18px;
    border-radius: 30px;
    color: #fff;
    text-align: center;
  }
  
  #enerty .bt {
    background: #f7f7f7;
    color: #fff;
  }
  
  #enerty .bt span {
    width: 25%;
    float: left;
    text-align: center;
    color: #999999;
    line-height: 30px;
  }
  
  #enerty ul li {
    width: 48%;
    display: inline-block;
    margin: 0;
  }
  
  #enerty .element span {
    width: 25%;
    float: left;
    text-align: center;
    line-height: 60px;
    font-size: 14px;
  }
  </style>
    